<template>
  <div class="collapse-input-style">
    <a-form-model ref="form" :model="formData" :rules="rules">
      <template v-for="(item, index) in options">
        <div :key="index">
          <a-form-model-item v-if="inputShow[item.name] && item.type != 'dycustComponents' && item.type != 'a-divider'" :label="item.label" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="item.name">
            <a-input-number v-if="item.type == 'a-input-number'" v-model.trim="formData[item.name]" @change="changed($event, item.name)" style="width:100%" />

            <a-input v-if="item.type == 'a-input-text'" v-model.trim="formData[item.name]" type="text" placeholder="请输入内容" clearable @change="changed($event.target.value, item.name)"/>

            <a-input v-if="item.type == 'a-input-textarea'" v-model.trim="formData[item.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event.target.value, item.name)"/>

            <a-switch v-if="item.type == 'a-switch'" v-model="formData[item.name]" @change="changed($event, item.name)"/>
            
            <s-color-picker v-if="item.type == 'vue-color'" v-model="formData[item.name]" @change="changed($event, item.name)"/>
            
            <s-upload v-if="item.type == 'custom-upload'" v-model="formData[item.name]" @change="changed(formData[item.name], item.name)" :number="1"/>
            
            <s-upload v-if="item.type == 'image-upload'" v-model="formData[item.name]" @change="changed(formData[item.name], item.name)" fileType="image" :number="1"/>

            <a-radio-group v-if="item.type == 'a-radio-group'" v-model="formData[item.name]" @change="changed($event.target.value, item.name)">
              <a-radio-button v-for="itemChild in item.selectOptions" :value="itemChild.code">
                {{ itemChild.name }}
              </a-radio-button>
            </a-radio-group>

            <a-select v-if="item.type == 'a-select'" v-model="formData[item.name]" clearable placeholder="请选择" @change="changed($event, item.name)">
              <a-select-option v-for="itemChild in item.selectOptions" :key="itemChild.code" :value="itemChild.code">{{itemChild.name}}</a-select-option>
            </a-select>

            <a-slider v-if="item.type == 'a-slider'" v-model="formData[item.name]" @change="changed($event, item.name)"/>

            <a-button v-if="item.type == 'a-button'" type="primary" plain @click="dialogVisibleStaticData = true">静态数据编辑</a-button>

            <!-- 弹窗 -->
            <a-modal title="静态数据编辑" :visible.sync="dialogVisibleStaticData" width="50%" @cancel="dialogVisibleStaticData=false" @ok="saveStaticData">
              <vue-json-editor v-model="formData[item.name]" :show-btns="false" :mode="'code'" lang="zh" class="my-editor"/>
              <span slot="footer" class="dialog-footer">
                <a-button @click="dialogVisibleStaticData = false">取 消</a-button>
                <a-button type="primary" @click="saveStaticData">确 定</a-button>
              </span>
            </a-modal>
            
            <custom-table v-if="item.type == 'custom-table' && inputShow[item.name]" v-model="formData[item.name]" :chart-type="item.chartType" @change="changed($event, item.name)"/>
            
            <custom-color v-if="item.type == 'custom-color'" title="自定义配色设置" @change="changed($event, item.name)" v-model="formData[item.name]" :limit="item.limit"/>
            
            <j-dict-select-tag v-if="item.type == 'a-dict-select-tag'" :dictCode="item.dictKey" v-model="formData[item.name]" style="width:100%;" :triggerChange="true" @change="changed($event, item.name)"/>
            
          </a-form-model-item>
          
          <a-divider v-if="item.type == 'a-divider'">{{item.label}}</a-divider>
          
        </div>
      </template>
    </a-form-model>
  </div>
</template>

<script>
import { cloneObject } from "@/utils/util"
import vueJsonEditor from "vue-json-editor";
import dynamicComponents from "./dynamicComponents.vue";
import customTable from "./customTable.vue";
import customColor from "./customColor.vue";
export default {
  name: "DynamicForm",
  components: {
    vueJsonEditor,
    dynamicComponents,
    customTable,
    customColor
  },
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    options: Array,
    value: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      rules: {},
      inputShow: {}, // 控制表单是否显示
      dialogVisibleStaticData: false,
      dialogVisibleDynamicTable: false,
      dialogVisibleDynamicColor: false,
      validationRules: "",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      optionsJavascript: {
        mode: "text/javascript",
        tabSize: 2, // 缩进格式
        lineNumbers: true, // 显示行号
        line: true,
        styleActiveLine: true, // 高亮选中行

        hintOptions: {
          completeSingle: true // 当匹配只有一项的时候是否自动补全
        }
      },
      record: null
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.formData = newValue || {};
    },
    options(val) {
      this.setDefaultValue();
      this.isShowData();
    }
  },
  created() {
    this.isShowData();
    this.setDefaultValue();
  },
  mounted() {},
  methods: {
    onJsonChange(val) {
      console.log(val);
    },
    onJsonSave(val) {
      console.log(val);
    },
    // 无论哪个输入框改变 都需要触发事件 将值回传
    changed(val, key) {
      console.log(val, key, 'changed')
      this.$set(this.formData, key, val);
      this.$emit("onChanged", this.formData);
      // key为当前用户操作的表单组件
      for (var i = 0; i < this.options.length; i++) {
        var item = this.options[i];
        if (item.relactiveDom == key) {
          this.inputShow[item.name] = val === item.relactiveDomValue;
          this.inputShow = Object.assign({}, this.inputShow);
        }
      }
    },
    saveStaticData() {
      this.$emit("onChanged", this.formData);
      this.dialogVisibleStaticData = false;
    },
    saveDynamicTable() {
      this.$emit("onChanged", this.formData);
      this.dialogVisibleDynamicTable = false;
    },
    saveDynamicColor() {
      this.$emit("onChanged", this.formData);
      this.dialogVisibleDynamicColor = false;
    },
    showDynamicTable(record) {
      this.$emit("onChanged", this.formData);
      this.dialogVisibleDynamicTable = true;
    },
    showDynamicColor(record) {
      this.$emit("onChanged", this.formData);
      this.dialogVisibleDynamicColor = true;
    },
    // 组件属性 数据是否展示动态还是静态数据
    isShowData() {
      let currentData = {};
      const data = [];
      for (let i = 0; i < this.options.length; i++) {
        // 添加默认的inputShow值
        this.inputShow[this.options[i].name] = true;
        if (this.options[i].selectValue) {
          currentData = this.options[i];
        } else {
          data.push(this.options[i]);
        }
      }
      let ruleArrays = this.options.filter(item => { return item.required}).map(item => {
        return { message: item.label + "不能为空", key: item.name }
      })
      this.rules = {}
      ruleArrays.forEach(item => {
        this.rules[item.key] = [{required: true, message: item.message}]
      });
      data.forEach(el => {
        if (el.relactiveDomValue != currentData.value) {
          this.inputShow[el.name] = false;
        }
      });
    },
    // 组件拖入时 赋值
    setDefaultValue() {
      if (this.options && this.options.length > 0) {
        for (let i = 0; i < this.options.length; i++) {
          const obj = this.options[i];
          if (Object.prototype.toString.call(obj) == "[object Object]") {
            this.formData[obj.name] = obj.value;
          } else if (Object.prototype.toString.call(obj) == "[object Array]") {
            for (let j = 0; j < obj.length; j++) {
              const list = obj[j].list;
              list.forEach(el => {
                this.formData[el.name] = el.value;
              });
            }
          }
        }
        this.formData = Object.assign({}, this.formData);
      }
    },
    // 是否显示 那种格式
    isShowForm(val, type) {
      return Object.prototype.toString.call(val) == type;
    }
  }
};
</script>

<style lang="less">
  .collapse-input-style{
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 130px);
  }
  .collapse-input-style .ant-form-item-label > label {
    color: #fff !important;
  }
  
  .collapse-input-style  {
    .ant-input-number, .ant-input, .ant-upload, .ant-input-number-handler-wrap, .ant-select-selection, .ant-select-dropdown {
      color: #fff;
    }
    .ant-tabs-nav, .ant-select-arrow, .ant-divider-horizontal.ant-divider-with-text-center, .ant-input-number-handler-up-inner, .ant-input-number-handler-down-inner {
      color: #fff !important;
    }
    .ant-switch {
    }
    .ant-btn-primary {
      border-color: #fff;
    }
    .ant-radio-button-wrapper {
      color: #fff;
      border-color: #fff;
      &.ant-radio-button-wrapper-checked {
        color: #40a9ff;
        border-color: #40a9ff;
      }
    }
    
    .m-colorPicker {
    }
  }
</style>
